<template>
	<div class="logview allbgc">
		<div class="logview-top logreg-top alltop">
			<span>
				<router-link to="/">
					<</router-link> </span> <p>
						<span>
							<router-link to="/reg">注册</router-link>
							/
							<router-link to="/log">登录</router-link>
						</span>
						</p>
		</div>
		<!-- ref的作用是对表单组件的引用 -->
		<van-form @submit="onSubmit" ref="regFrom">
			<van-field v-model="username" name="username" label="手机号" placeholder="请填写手机号" :rules="[{ required: true, message: '填写手机号' },{pattern:/^1[3-9]\d{9}$/,message:'手机号格式不正确'}]" />
			<van-field v-model="password" type="password" name="password" label="密码" placeholder="请填写密码" :rules="[{ required: true, message: '请填写密码' }]" />
			<van-field v-model="vercode" name="vercode" label="验证码" placeholder="请填写验证码" clearable :rules="[{ required: true, message: '请填写验证码' },{pattern:/^\d{6}$/,message:'验证码格式错误'}]">
				<template #button>
					<van-button type="primary" native-type="button" size="small" @click="sendSms" :disabled="codeButDisabled">{{code_text}}</van-button>
				</template>
			</van-field>

			<div style="margin: 16px;">
				<van-button round block type="info" native-type="submit" color="#07c160" style="width: 280px;height: 40px;font-size: 14px;margin: 0 auto;">提交</van-button>
			</div>
		</van-form>
	</div>
</template>

<script>
	import {
		reg,
		sendSms
	} from '../api/user.js'

	export default {
		data() {
			return {
				username: '',
				password: '',
				vercode: '',
				codeButDisabled: false,
				code_text: "发送验证码"
			}
		},
		methods: {
			onSubmit(values) {
				console.log('submit', values);

				reg(values).then(res => {
					console.log(res)
					if (res.data.code == 0) {
						this.$toast('注册成功,请去登录', 1500);
						this.$router.push('/log')
					} else {
						this.$toast('注册失败');
					}
				})
			},
			async sendSms() {
				try {
					let validate_res = await this.$refs.regFrom.validate("username")
					// console.log(validate_res);
					// 如果验证成功  
					// 1.准备请求接口  让获取验证码的按钮不能再被点击
					this.codeButDisabled = true;
					this.code_text = "发送中";

					sendSms({
						mobile: this.username,
						type: 'register'
					}).then(res => {
						console.log(res);
						if (res.data.code == 0) {
							// 发送成功
							this.$toast(`短信已经发送到手机号${this.username},请注意查收`);

							// 倒计时
							let count = 60;
							let timer = setInterval(() => {
								count--
								this.code_text = `${count}s后再次获取`;
								if (count <= 0) {
									// 倒计时结束 清除计时器  让按钮恢复成可点击的状态
									clearInterval(timer);
									this.code_text = "再次发送"
									this.codeButDisabled = false;
									count = 60
								}
							}, 1000)
							this.code_text = "再次发送";
						} else {
							this.$toast(res.msg || '发送失败');
							this.codeButDisabled = false;
							this.code_text = "再次发送";
						}
					}).catch(err => {
						// 网络有波动的情况下
						console.log(err);
						this.$toast(err.msg || '发送失败');
						// 恢复可点击
						this.codeButDisabled = false;
						this.code_text = "再次发送";
					})
				} catch (e) {

				}

			}
		}
	}
</script>

<style lang="less">
	.regview-main {
		position: relative;
	}

	.msg_btn {
		color: #000;
		position: absolute;
		right: 10px;
		top: 115px;
	}
</style>
